<template>
  <el-dialog
      :model-value="visible"
      :title="title"
      :width="width"
      :show-close="showClose"
      :top="top"
      :append-to-body="true"
      :close-on-click-modal="false"
      class="app-modal"
      @close="handleClose"
  >
    <slot></slot>

    <template v-if="$slots.footer" #footer>
      <div class="dialog-footer">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElDialog } from 'element-plus';

// 定义组件的props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '提示',
  },
  width: {
    type: String,
    default: '50%',
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  top: {
    type: String,
    default: '15vh',
  },
});

// 定义组件的emits
const emit = defineEmits(['update:visible', 'close']);

// 关闭对话框时触发，更新v-model绑定的值
const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};
</script>

<style lang="scss" scoped>
// 可以为通用模态框添加一些统一的样式
.app-modal {
  .dialog-footer {
    text-align: right;
  }
}
</style>